<template>
  <div class="footer p-3">
    <span class="scroll"></span>
    <div class="container">
      <div class="row">
        <div class="col-md">
          <div class="ftco-footer-widget">
            <h5 class="ftco-heading-2" style="font-size: 13px">霸霸网盘</h5>
            <p class="li-size">
              网盘起这个名字是为了致敬《庆余年2》中的王启年的女儿王霸，所以起名霸霸网盘。
            </p>
            <div class="col-md">
              <img
                src="@/assets/img/common/logo_footer_black.png"
                alt=""
                style="max-width: 100%; height: auto"
              />
            </div>
          </div>
        </div>
        <div class="col-md">
          <div class="ftco-footer-widget ml-md-4">
            <h5 class="ftco-heading-2" style="font-size: 13px">实用链接</h5>
            <ul class="list-unstyled">
              <li class="li-magin">
                <a
                  href="#"
                  class="d-block li-size text-decoration-none text-black"
                  >公司</a
                >
              </li>
              <li class="li-magin">
                <a
                  href="#"
                  class="d-block li-size text-decoration-none text-black"
                  >价格</a
                >
              </li>
              <li class="li-magin">
                <a
                  href="#"
                  class="d-block li-size text-decoration-none text-black"
                  >博客</a
                >
              </li>
              <li class="li-magin">
                <a
                  href="#"
                  class="d-block li-size text-decoration-none text-black"
                  >联系我们</a
                >
              </li>
            </ul>
          </div>
        </div>
        <div class="col-md">
          <div class="ftco-footer-widget">
            <h5 class="ftco-heading-2" style="font-size: 13px">导航</h5>
            <ul class="list-unstyled">
              <li class="li-magin">
                <a
                  href="#"
                  class="d-block li-size text-decoration-none text-black"
                  >加入我们</a
                >
              </li>
              <li class="li-magin">
                <a
                  href="#"
                  class="d-block li-size text-decoration-none text-black"
                  >博客</a
                >
              </li>
              <li class="li-magin">
                <a
                  href="#"
                  class="d-block li-size text-decoration-none text-black"
                  >隐私与政策</a
                >
              </li>
              <li class="li-magin">
                <a
                  href="#"
                  class="d-block li-size text-decoration-none text-black"
                  >条款与条件</a
                >
              </li>
            </ul>
          </div>
        </div>
        <div class="col-md">
          <div class="ftco-footer-widget">
            <h5 class="ftco-heading-2" style="font-size: 13px">办公地点</h5>
            <div class="block-23 mb-3">
              <ul class="list-unstyled">
                <li class="li-magin">
                  <i class="bi bi-geo-alt-fill m-2 li-size"></i
                  ><span class="text">武汉软件6栋518</span>
                </li>
                <li class="li-magin">
                  <a href="#" class="text-decoration-none text-black li-size"
                    ><i class="bi bi-telephone-outbound m-2"></i
                    ><span class="text">+86 153 4267 9895</span></a
                  >
                </li>
                <li class="li-magin">
                  <a href="#" class="text-decoration-none text-black li-size"
                    ><i class="bi bi-envelope m-2"></i
                    ><span class="text">520@qq.com</span></a
                  >
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-md-12 text-center">
          <h5 class="p-0 m-0 text-center">
            <span style="font-size: 13px; margin-right: 15px">
              © 2024 BaBa 版权所有 | 版权所有</span
            >
            <span style="font-size: 13px"
              >保留所有权利 | 本模板由 BaBa 使用制作</span
            >
          </h5>
        </div>
      </div>
    </div>
  </div>
</template>
<style scoped>
.li-magin {
  margin-bottom: 2px;
}
.li-size {
  font-size: 12px;
}
.el-divider {
  background-color: rgb(84, 92, 100);
}
.footer-ul {
  margin: 3px, 3px !important;
}
/* 自定义样式 */
.footer-links ul {
  list-style: none;
  padding: 0;
}
.footer-links li {
  display: inline-block;
  margin-right: 1rem; /* 调整列表项之间的间距 */
}
.social-links a {
  display: inline-block;
  margin-right: 0.5rem; /* 调整社交媒体链接之间的间距 */
  text-align: center;
  width: 32px; /* 设置图标宽度 */
  height: 32px; /* 设置图标高度 */
  line-height: 32px; /* 垂直居中图标 */
  border-radius: 50%; /* 圆形图标 */
  background-color: #ddd; /* 图标背景色 */
  color: #333; /* 图标颜色 */
  transition: background-color 0.3s ease; /* 添加过渡效果 */
}
.social-links a:hover {
  background-color: #999; /* 鼠标悬停时改变背景色 */
}
.footer {
  /* height: 250px; */
  text-align: center;
  font-size: 14px;
  position: relative;
  background-color: #f5f5f5;
  padding: 15px 0;
  text-align: center;
  left: 0;
  bottom: 0;
  width: 100%;
}
.footer {
  cursor: pointer;
}
.footer .scroll {
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 5px;
  border: 1px solid rgba(66, 185, 131, 0.4);
  background-color: rgba(66, 185, 131, 0.4);
  position: absolute;
  left: 5%;
  top: -25px;
  z-index: 10;
  animation: scrollA infinite 20s linear alternate;
}
@keyframes scrollA {
  0% {
    left: 5%;
    transform: rotate(180deg);
  }
  10% {
    left: 5%;
    transform: rotate(270deg);
  }
  20% {
    left: 5%;
    transform: rotate(450deg);
  }
  25% {
    left: 10%;
    transform: rotate(540deg);
  }
  30% {
    left: 20%;
    transform: rotate(720deg);
  }
  35% {
    left: 30%;
    transform: rotate(900deg);
  }
  40% {
    left: 40%;
    transform: rotate(1080deg);
  }
  45% {
    left: 50%;
    transform: rotate(1260deg);
  }
  50% {
    left: 60%;
    transform: rotate(1440deg);
  }
  55% {
    left: 70%;
    transform: rotate(1620deg);
  }
  60% {
    left: 80%;
    transform: rotate(1800deg);
  }
  80% {
    left: 90%;
    transform: rotate(2610deg);
  }
  90% {
    left: 90%;
    transform: rotate(2340deg);
  }
  100% {
    left: 90%;
    transform: rotate(2520deg);
  }
}
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
}

.footer-link {
  margin-right: 10px;
  color: #333;
  text-decoration: none;
}

.footer-link:hover {
  text-decoration: underline;
}

.copyright {
  color: #999;
  font-size: 14px;
}
</style>
<script>
export default {
  name: "FooterCompoent",
  data() {
    return {
      drawer: false,
      direction: "btt",
    };
  },
  methods: {
    handleClose(done) {
      done();
    },
  },
};
</script>
